<template>
	<view class="my-order">
		<view class="list">
			<view class='item' v-for="(item,index) in dataList" :key="index">
				<view @click="goDetails(item)">
					<view class='title acea-row row-between-wrapper'>
						<view class="acea-row row-middle left-wrapper">
							{{item.title}}
						</view>
						<view class='font-color' v-if="item.status == 0">待付款</view>
						<view class='font-color' v-if="item.status == 1 && item.refund_order == 0">已付款</view>
						<view class='font-color' v-if="item.status == 1 && item.refund_order == 1">审核中</view>
						<view class='font-color' v-if="item.status == 1 && item.refund_order == 2">已退款</view>
						<view class='font-color' v-if="item.status == 1 && item.refund_order == 3">拒绝退款</view>
						<view class='font-color' v-if="item.status == 2">已使用</view>
						<view class='font-color' v-if="item.status == 3">已过期</view>

					</view>

					<view class='item-info acea-row row-between row-top'>
						<view class='pictrue'>
							<image :src='item.thumb'></image>
						</view>
						<view class='right_info'> 
								<view class='name line2'>演出时间：{{item.start_time|formatDate}}</view>
								<view class='name line2'>数量：{{item.total}}张</view>
								<view class='name line2'>总价：¥{{item.price}}</view>
						</view>
					</view>

					<view class='bottom acea-row  row-middle'>
						<text>订票人：{{item.user_name}}</text>
						<text>订票时间：{{item.add_time | formatDate}}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		query
	} from '@/api/show.js'
	const app = getApp()
	export default {
		data() {
			return {
				dataList:[],
				page:1,
				limit:20,
				status: '',
				showBuy: app.globalData.temp_status != 1,
				isLoadMore:false,
				keywords:''
			}
		},
		onLoad(options) {
			this.keywords = options.keywords;
			this.loadData();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.loadData();
		},
		onReachBottom() {
			if(!this.hasMore){
				return false;
			}
			this.page++;
			this.loadData();
		},
		methods: {
			loadData(){
				let that = this;
				query({keywords:this.keywords,page:this.page,limit:this.limit}).then(res => {
					uni.stopPullDownRefresh();
					if (res.status == 200) {
						if(res.data.length == that.limit){
							that.hasMore = true;
						}else{
							that.hasMore = false;
						}
						if(that.page == 1){
							let arr = [];
							res.data.map(function(item){
								arr.push(item);
							})
							that.dataList = arr;
						}else{
							if(res.data.length > 0){
								res.data.map(function(item){
									that.dataList.push(item);
								})
							}else{
								if(that.page > 1){
									that.page -= 1;
								}
							}
						}
					} else {
						_this.$util.Tips({
							title: res.message,
							icon: 'error'
						})
					}
					console.log(res);
				}).catch(er => {
					uni.stopPullDownRefresh();
					_this.$util.Tips({
						title: er,
						icon: 'error'
					})
				})
			},
			
			goDetails(item) {
				console.log(item);
				uni.navigateTo({
					url: `/pages/users/ticket/show_detail?order_sn=${item.order_sn}&id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.my-order{
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom); 
	}
	.my-order .list {
	  width: 690rpx;
	  margin: 14rpx auto 20rpx auto;
	}

	.my-order .list .item {
	  background-color: #fff;
	  border-radius: 6rpx;
	  margin-bottom: 14rpx;
	}

	.my-order .list .item .title {
	  height: 84rpx;
	  padding: 0 30rpx;
	  border-bottom: 1rpx solid #eee;
	  font-size: 28rpx;
	  color: #282828;
	
	  .left-wrapper {
	    .iconfont {
	      margin-top: 5rpx;
	    }
	
	    .store-name {
	      margin: 0 10rpx;
	    }
	
	    .icon-xiangyou {
	      font-size: 20rpx;
	    }
	  }
	}
	
	.my-order .list .item .title .sign {
	  font-size: 24rpx;
	  padding: 0 7rpx;
	  height: 36rpx;
	  margin-right: 15rpx;
	}
	
	.my-order .list .item .item-info {
	  padding: 22rpx 30rpx;
	  //margin-top: 22rpx;
	}
	
	.my-order .list .item .item-info .pictrue {
	  width: 120rpx;
	  height: 120rpx;
	}
	
	.my-order .list .item .item-info .pictrue image {
	  width: 100%;
	  height: 100%;
	  border-radius: 6rpx;
	}
	
	.my-order .list .item .item-info .text {
	  width: 486rpx;
	  font-size: 28rpx;
	  color: #999;
	  margin-top: 6rpx;
	}
	
	.my-order .list .item .item-info .text .name {
	  width: 320rpx;
	  color: #282828;
	}
	.event_bg{
	  background: #FF7F00;
	}
	.event_color{
	  color: #FF7F00;
	}
	.my-order .list .item .event_name{
	  display: inline-block;
	  margin-right: 9rpx;
	  color: #fff;
	  font-size: 20rpx;
	  padding: 0 8rpx;
	  line-height: 30rpx;
	  text-align: center;
	  border-radius: 6rpx;
	}
	.my-order .list .item .event_ship{
	  font-size: 20rpx;
	  margin-top: 10rpx;
	}
	.my-order .list  .event_price{
	  margin: 0 0 50rpx 120rpx;
	}
	.my-order .list .item .item-info .text .money {
	  text-align: right;
	}
	
	.my-order .list .item .totalPrice {
	  font-size: 26rpx;
	  color: #282828;
	  text-align: right;
	  margin: 27rpx 0 0 30rpx;
	  padding: 0 30rpx 30rpx 0;
	}
	
	.my-order .list .item .totalPrice .money {
	  font-size: 28rpx;
	  font-weight: bold;
	}
	
	.my-order .list .item .bottom {
	  height: 107rpx;
	  padding: 0 30rpx;
	  border-top: 1px solid #f0f0f0;
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	}
	
	.my-order .list .item .bottom .bnt {
	  //width: 176rpx;
	  width: 140rpx;
	  height: 60rpx;
	  text-align: center;
	  line-height: 60rpx;
	  color: #fff;
	  border-radius: 50rpx;
	  font-size: 27rpx;
	}
	
	.my-order .list .item .bottom .bnt.cancelBnt {
	  border: 1rpx solid #ddd;
	  color: #aaa;
	}
	
	.my-order .list .item .bottom .bnt~.bnt {
	  margin-left: 17rpx;
	}
</style>
